<template>
  <div id="reserve">
    <div class="carinformation">
      <p>车辆信息</p>
      <ul>
        <li :data-carId="carsdetail.carId">
          <div class="carpic fl">
            <img :src="carsdetail.carImg" alt="" class="pic">
            <p class="plate">{{carsdetail.plateNum}}</p>
          </div>
          <div class="cardetail fl">
            <p>{{carsdetail.carTypeName}}+{{carsdetail.seatDesc}}</p>
            <p><span style="color:#09C16A">{{carsdetail.timeFeeDesc}}</span>元/分钟+<span style="color:#09C16A">{{carsdetail.mileageFeeDesc}}</span>元/公里</p>
            <p>
              <img :src='imgSrc.replace("??",Math.ceil(carsdetail.power/10))' alt="">
              <span>{{carsdetail.remainMileageDesc}}</span>
            </p>
          </div>
          <!--用车红包-->
          <div class="redbag" v-if="carsdetail.redPacketAmount>0">
            <span class="bagpic"></span>
            <span>立减{{carsdetail.redPacketAmount}}元</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="parking">
      <p>网点信息</p>
      <div class="parkingd">
        <div class="common">
          <div class="name">取车点</div>
          <div class="right">
            <p class="parkname" :class="{'active':money1}">{{carsdetail.takeParkingName}}</p>
            <p class="st" v-if="carsdetail.parkingFeeRefunded>0">需垫付停车费约{{carsdetail.parkingFeeRefunded}}元</p>
          </div>
        </div>
        <div class="common" style="border: none;">
          <div class="name">还车点</div>
          <div class="right">
            <p class="parkname" :class="{'active':money1}">{{carsdetail.returnParkingName}}</p>
            <p class="st" v-if="carsdetail.parkingServiceFee >0">还车服务费{{carsdetail.parkingServiceFee}}元</p>
          </div>
        </div>
      </div>
    </div>
    <div class="ten">
      <div class="title">
        <span>不计免赔服务</span>
        <span class="rule"></span>
      </div>
      <div class="buy">
        <div class="y active11">
          <span class="tenpic fl"></span>
          <span class="fl">10元购买</span>
        </div>
        <div class="n">
          不购买
        </div>
      </div>
    </div>
    <div class="reservebtn">
      <div class="prebtn" @click.stop="preback">
        <span class="prebtnicon"></span>
        <span>选还车点</span>
      </div>
      <div class="nextbtn" @click="ordercar">
        <span>确认预定</span>
        <span class="nextbtnicon"></span>
      </div>
    </div>
  </div>
</template>
<script>
  import qs from 'qs'
  export default{
    data () {
      return {
        imgSrc: "../../static/image/img_energy_lv??.png",
        carsdetail: {},
        money1: true,
        money2: true,
        abatement: 1
      }
    },
    methods: {
      ordercar () {
        var _this = this
        this.axios.post('order/confirm.json', qs.stringify({
          returnParkingId: sessionStorage.finalbackid,
          takeParkingId: sessionStorage.initparkid,
          carId: sessionStorage.carId,
          abatement: _this.abatement,
          access_token: _this.global.token
        }))
          .then(function (res) {
            console.log(res.data)
            if (res.data.code == 200) {
              _this.$router.push({
                path: 'WaitUse',
                query: {
                  orderId: res.data.modelData.orderId
                }
              })
            } else if (res.data.code == 1211) {
//                _this.$router.push('')
            }else if (res.data.code == 1211) {
//                _this.$router.push('')
            }
          })
      },
      cars () {
        var _this = this
        this.axios.post('order/preConfirm.json', qs.stringify({
          returnParkingId: sessionStorage.finalbackid,
          takeParkingId: sessionStorage.initparkid,
          carId: sessionStorage.carId,
          access_token: _this.global.token
        }))
          .then(function (res) {
            console.log(res)
            if (res.data.code == 200) {
              _this.carsdetail = res.data.modelData
              _this.money1 = _this.carsdetail.parkingFeeRefunded > 0 ? false : true
              _this.money12 = _this.carsdetail.parkingServiceFee > 0 ? false : true
            }
          })
      },
      ten () {
        $('.y').on('click', function () {
          $(this).addClass('active11')
          $('.n').removeClass('active11')
          this.abatement = 1
        })
        $('.n').on('click', function () {
          $(this).addClass('active11')
          $('.y').removeClass('active11')
          this.abatement = 0
        })
      },
      preback () {
        this.$router.push('/Rebackpark')
      }
    },
    mounted () {
      this.cars()
      this.ten()
    }
  }
</script>
<style lang="scss">
  @import "../style/scss/reserve";
  .bagpic{
    background: url("../../static/image/icon_sales_4.png");
    -webkit-background-size: cover;
    background-size: cover;
  }
  .rule{
    background: url("../../static/image/icon_issue.png");
    -webkit-background-size: cover;
    background-size: cover;
    vertical-align: middle;
  }
  .tenpic{
    background: url("../../static/image/icon_insurance_enabled.png");
    -webkit-background-size: cover;
    background-size: cover;
  }
  .prebtnicon{
    width:14px;
    height:24px;
    display: inline-block;
    background: url("../../static/image/icon_select_back.png");
    -webkit-background-size: cover;
    background-size: cover;
    margin-left:40px;
    margin-top:38px;
    margin-right:26px;
  }
  .nextbtnicon{
    width:14px;
    height:24px;
    display: inline-block;
    background: url("../../static/image/icon_next.png");
    -webkit-background-size: cover;
    background-size: cover;
    margin-left:46px;
    margin-top:38px;
  }
</style>
